<template>
  <section class="py-16 bg-zinc-50">
    <div class="container mx-auto px-4">
      <div class="text-center mb-12">
        <h2 class="text-3xl font-bold text-zinc-900 mb-4">Powerful Features</h2>
        <p class="text-lg text-zinc-600 max-w-2xl mx-auto">
          Our platform provides everything you need to clone and customize UIs with precision and
          ease.
        </p>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <div
          v-for="feature in features"
          :key="feature.title"
          class="bg-white p-6 rounded-lg shadow-sm border border-zinc-100 hover:shadow-md transition-shadow"
        >
          <div class="mb-4" v-html="feature.icon" />
          <h3 class="text-xl font-semibold text-zinc-900 mb-2">{{ feature.title }}</h3>
          <p class="text-zinc-600">{{ feature.description }}</p>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
const features = [
  {
    title: 'Pixel-Perfect Cloning',
    description:
      "Create exact replicas of any website's UI with just a URL. Our AI ensures every detail is captured.",
    icon: `<div class="w-8 h-8 bg-emerald-100 rounded-lg flex items-center justify-center">
      <svg class="w-5 h-5 text-emerald-600" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2"/>
        <rect x="7" y="7" width="10" height="10" rx="1" stroke="currentColor" stroke-width="2"/>
      </svg>
    </div>`,
  },
  {
    title: 'Instant Results',
    description:
      'Get your cloned UI in seconds. No need to wait for manual recreation or lengthy processes.',
    icon: `<div class="w-8 h-8 bg-emerald-100 rounded-lg flex items-center justify-center">
      <svg class="w-5 h-5 text-emerald-600" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="m13 2-3 7h4l-3 7m-4-8h2m-2 4h2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>`,
  },
  {
    title: 'Clean Code Output',
    description:
      'Receive well-structured, maintainable code that follows best practices and modern standards.',
    icon: `<div class="w-8 h-8 bg-emerald-100 rounded-lg flex items-center justify-center">
      <svg class="w-5 h-5 text-emerald-600" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="m16 18 2-2-2-2M8 6l-2 2 2 2m8-10-4 20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>`,
  },
  {
    title: 'Customizable Elements',
    description:
      'Easily modify colors, fonts, and layouts to match your brand or design preferences.',
    icon: `<div class="w-8 h-8 bg-emerald-100 rounded-lg flex items-center justify-center">
      <svg class="w-5 h-5 text-emerald-600" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
        <path d="M12 1v6m0 6v6M1 12h6m6 0h6m-2.636-8.364L16.95 8.05m-1.414 7.9l4.586 4.586M3.636 3.636L8.05 8.05m7.9 1.414l4.586-4.586" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
      </svg>
    </div>`,
  },
  {
    title: 'Component-Based Architecture',
    description:
      'All UIs are broken down into reusable components for easier maintenance and scalability.',
    icon: `<div class="w-8 h-8 bg-emerald-100 rounded-lg flex items-center justify-center">
      <svg class="w-5 h-5 text-emerald-600" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect x="3" y="3" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2"/>
        <rect x="14" y="3" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2"/>
        <rect x="3" y="14" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2"/>
        <rect x="14" y="14" width="7" height="7" rx="1" stroke="currentColor" stroke-width="2"/>
      </svg>
    </div>`,
  },
  {
    title: 'Developer-Friendly Tools',
    description:
      'Built-in tools for easy debugging, testing, and deployment of your cloned projects.',
    icon: `<div class="w-8 h-8 bg-emerald-100 rounded-lg flex items-center justify-center">
      <svg class="w-5 h-5 text-emerald-600" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>`,
  },
]
</script>
